<script setup lang="ts">
import {ref} from "vue";
import {HomeFilled} from "@element-plus/icons-vue";

const activeIndex = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>

<template>
  <el-header>
    <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        :ellipsis="false"
        @select="handleSelect"
        router
    >
      <el-menu-item class="icon"><el-icon><HomeFilled /></el-icon></el-menu-item>
      <div class="flex-grow"/>
      <el-menu-item index="/user/userHomepage">服务主页</el-menu-item>
      <el-menu-item index="/user/userServer">我的服务</el-menu-item>
      <el-menu-item index="">退出登录</el-menu-item>
    </el-menu>
  </el-header>
</template>

<style scoped>
.el-header {
  width: auto;
  .icon{
    height: 50px;
  }
}

.flex-grow {
  flex-grow: 1;
}
</style>